<script setup lang="ts">
import { Position, Handle } from "@vue-flow/core"; // 导入 Position 类型
import { NodeToolbar } from "@vue-flow/node-toolbar";
import { IOUnitType, factorType } from "@/utils/serviceDict";
import { computed } from "vue";

// props 类型定义
const props = defineProps({
  id: String,
  data: {
    type: Object,
    required: true,
    default: () => ({
      toolbarVisible: false,
      toolbarPosition: "top" as Position,
      label: "",
      consumption: "",
      unit: ""
    })
  }
});

// 根据传入的 data.isEmission 计算显示的按钮
const actions = computed(() => {
  if (props.data.isEmission === 0) {
    return ["添加能耗量", "查看详情"];
  }
  return ["详情", "删除"];
});

const handleType = "input";
defineEmits(["toolbar-action"]);
// 单位值为标签的方法
const getUnitLabel = (value: number) => {
  const unit = IOUnitType.find(item => item.value === value);
  return unit ? unit.label : "";
};

// 添加值转换为标签的方法
const getLabel = (value: number) => {
  const factor = factorType.find(item => item.value === value);
  return factor ? factor.label : "";
};
</script>
<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition as Position">
    <button v-for="action of actions" :key="action" type="button" @click="$emit('toolbar-action', action, props.id, handleType)">
      {{ action }}
    </button>
  </NodeToolbar>
  <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
    <div style="display: flex; align-items: center">
      <img v-if="data.label === 3" style="width: 20px; margin-right: 6px" src="@/assets/images/naturalGas.svg" />
      <img v-if="data.label === 4" style="width: 20px; margin-right: 6px" src="@/assets/images/oil.svg" />
      <img v-if="data.label === 2" style="width: 20px; margin-right: 6px" src="@/assets/images/water.svg" />
      <img v-if="data.label === 1" style="width: 20px; margin-right: 6px" src="@/assets/images/electric.svg" />
      {{ getLabel(data.label) }}
    </div>

    <div style="display: flex; align-items: center">
      <span v-if="data.isEmission === 0 && data.consumption !== 0">{{ data.consumption }}</span>
      <span v-if="data.isEmission === 0" style="margin-left: 4px">{{ getUnitLabel(data.unit) }}</span>
    </div>
  </div>

  <Handle
    type="source"
    :position="Position.Right"
    id="right"
    style="width: 7px; height: 23px; background-color: rgb(0 120 212); border-radius: 4px"
  />
</template>
